<template>
  <div style="height: 100%;width: 100%;">
    <div id="MindMapView"></div>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'
import { Graph } from '@antv/x6'

const props = defineProps({
  json: {
    type: String,
    required: true,
  },
})
onMounted(() => {
  const graph = new Graph({
    container: document.getElementById('MindMapView')!, // 画布的容器
    autoResize: true, // 是否监听容器大小改变，并自动更新画布大小
    panning: true, // 画布是否可以拖拽平移
    mousewheel: true, // 鼠标滚轮缩放
    interacting: false // 定制节点和边的交互行为
  })
  setTimeout(() => {
    graph.fromJSON(JSON.parse(props.json))
    graph.centerContent()
  }, 100);
})
</script>

<style scoped>

</style>
